<template>
	<view class="pages">
		<view class="search_warp">
			<u-tabs :list="tab_list" @click="click" :current="current" :itemStyle="{height:'92rpx',fontSize:'28rpx'}" lineColor="#FF7612" lineWidth="40" lineHeight="6" :activeStyle="{color:'#FF7612'}"></u-tabs>
		</view>
		<view class="list">
			<view class="item " v-for="(item,index) in tab_list[current].proData" :key="index" @click="skip(item)">
				<view class="u-flex-between u-flex item_top" >
					<text>{{tab_list[current].name}}时间:{{item.createdAt}}</text>
					<!-- <view v-if="current==0||current==1">
						<text >{{item.result}}</text>
						
					</view> -->
					<text v-if="current==0">{{item.inquiryUserId}}</text>
					<text v-else-if="current==1">{{item.unlockUserId}}</text>
					<text v-else-if="current==2">{{user_info.userId===item.userId?item.inquiryUserId:item.userId}}</text>
				</view>
			</view>
			<u-empty
			v-if="tab_list[current].proData.length==0"
			textSize='30'
			        mode="data"
					width="200"
					height="200"
					icon="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E6%95%B0%E6%8D%AE%E4%B8%BA%E7%A9%BA.png"
			>
			</u-empty>
		</view>
		
	</view>
</template>

<script>
	import {user_getInquiryUserList,user_getUnlockUserList,getBindingList} from '@/common/api.js'
	const app = getApp()
	export default {
		data() {
			return {
				user_info:{},
				current:0,
				tab_list:[{name:'询问',id:1,proData:[],page:1,count:0,perPage:15},{name:'解锁',proData:[],page:1,count:0,perPage:15,id:2},{name:'绑定过',proData:[],page:1,count:0,perPage:15,id:3}],
				$http_cos: app.$http_cos,
			}
		},
		onLoad() {
			this.get_list(user_getInquiryUserList)
		},
		onShow() {
				try{
					if (uni.getStorageSync('user_info')) {
						this.user_info=uni.getStorageSync('user_info')
					} else {
						this.is_login = false
					}	
				}catch(e){
					//TODO handle the exception
				}
		},
		onReachBottom() {
			this.init()
		},
		methods: {
			skip(item){
				if(this.current==1){
					uni.navigateTo({
						url:'/pagesA/square_details/index?id='+item.unlockUserId+'&title=回访'
					})
				}else{
					uni.navigateTo({
						url:'/pages/ask_details/index?id='+item.id+'&title=回访'
					})
				}
				
			},
			click(e){
				if(e.index==this.current)return;
				this.current=e.index
				let	list=this.tab_list[this.current]
				if(list.proData.length>0){
					return
				}
				this.init()
			},
			init(){
				let	list=this.tab_list[this.current]
				
				setTimeout(()=>{
					
					if(this.current==0){
						
						this.get_list(user_getInquiryUserList,list.id)
					}else if(this.current==1){
						this.get_list(user_getUnlockUserList,list.id)
						
					}else if(this.current==2){
						
						this.get_list(getBindingList,list.id)
					}
					
					
				},200)
			},
			get_list(it,id){
				let	list=this.tab_list[this.current]
				let data = {
					params:{
						page:list.page,
						perPage:list.perPage
					}
				}
				
				it(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					
					list.proData= [...list.proData, ...result.list]
					
					list.count=result.count
					if (result.list.length > 0) {
						list.page++
					}
					let it=this.tab_list.filter((item,index)=>{
							if(item.id==result.id){
								item.list=list
								item.count=result.count
							}
							return item
						})
						this.tab_list=it
						
				}).catch((err) => {
				
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages {

		.search_warp {
			// padding: 0rpx 10rpx;
			box-sizing: border-box;
			background-color: #fff;
			// height: 176rpx;
			/deep/ .u-tabs__wrapper__nav__item{
				flex: 1;
				padding:0;
				
				&__text{
					font-size:28rpx;
				}
				
			}
			/deep/ .u-tabs__wrapper__nav__line{
					left:5rpx;
				}
			.search {
				position: relative;
				height: 72rpx;
				width: 100%;
				background:#F9F9F9;
				border-radius: 36rpx;
				padding: 0 30rpx 0 32rpx;
				box-sizing: border-box;
			
				.search_img {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}

				input {
					font-size: 28rpx;
					color: #C9C9C9;
				}

				.search_btn {
					padding: 0 24rpx;
					box-sizing: border-box;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 2rpx;
						height: 100%;
						background: #E5E5E5;
						-webkit-transform: scaleX(.5);
						transform: scaleX(.5);
					}

					text {
						font-size: 28rpx;
						font-weight: 400;
						color: #111111;
					}
				}
			}
		}

		.collapse {
			margin-top: 10rpx;

			.collapse_item {
				padding: 12rpx;
				box-sizing: border-box;

				text {
					font-size: 28rpx;
					color: #000000;
				}

				.arrow-icon {
					width: 20rpx;
					height: 12rpx;
					margin-left: 27rpx;
				}
			}
		}

		.list {
			padding: 20rpx;
			box-sizing: border-box;

			.item {

				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 16rpx;

				.item_top {
					position: relative;
					height: 73rpx;
					padding: 0 29rpx 0 27rpx;
					box-sizing: border-box;
					align-items: center;
					text{
						&:first-child{
							font-size: 26rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #929292;
						}
						&:last-child{
							font-size: 28rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							// color: #FF7612;
						}
					}
					&:after {
						content:'';
						left: 0;
						bottom: 0;
						width: 100%;
						height:2rpx ;
						position: absolute;
						background: #E5E5E5;
						-webkit-transform: scaleY(.5);
						transform: scaleY(.5);

					}
				}
				.item_botton{
					height:130rpx;
					
					.item_botton_text{
						text{
							font-size: 28rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #111111;
						}
						align-items: center;
					}
					.arrows {
						width: 74rpx;
						height: 44rpx;
						padding: 0 90rpx 0 79rpx;
					}
				}
				
			}
		}


	}
</style>
